<template>
  <el-card class="box-card" shadow="hover">
    <FontSizeAdaptor/>
    <div slot="header" class="header">
      <span class="header_title">预警数统计</span>
    </div>
    <div id="main" ref="main">
    </div>
  </el-card>
</template>

<script>
import * as echarts from 'echarts';
require('echarts/theme/macarons') // echarts theme
// import resize from './mixins/resize'
import { pieEchartSetting } from './pieechartsetting.js'
import { getDicts } from '@/api/system/dict/data.js'
import FontSizeAdaptor from "../../../components/FontSizeAdaptor/FontSizeAdaptor.vue";

export default {
  name: "AlarmEcharts",
  components: {FontSizeAdaptor},
  data() {
    return {
      dataList: [],
      chartExtend: pieEchartSetting,
      alarmTypeList: []
    }
  },
  mounted() {
    this.getAlarmType()
  },
  methods: {
    getAlarmType(){
      getDicts('warn_param_type').then(res => {
        if(res.code === 200) {
          this.alarmTypeList = res.data
        }
      })
    },
    updateList(value) {
      this.dataList = value
      this.renderChart()
    },
    // 初始化图表
    async initEchart() {
      let myChart = echarts.init(this.$refs.main)
      this.chartExtend.series[0].name = '预警数量'
      myChart.setOption(this.chartExtend, true)
      window.addEventListener('resize', function() {
        myChart.resize()
      })
    },
    // 渲染图表数据
    renderChart(){
      this.resetEchart()
      let echartslist = this.dataList
      let seriesList = []
      let legendList = []
      if(echartslist.length > 0) {
        for(let i = 0; i < echartslist.length; i++) {
          for(let j = i; j < this.alarmTypeList.length; j++) {
            if(echartslist[i].warnParamType.toString() === this.alarmTypeList[j].dictValue) {
              let echartsObj = {}
              echartsObj.name = this.alarmTypeList[j].dictLabel
              echartsObj.value = echartslist[i].warnCount
              legendList.push(echartsObj.name)
              seriesList.push(echartsObj)
              this.chartExtend.series[0].data = seriesList
              // this.chartExtend.legend.data = legendList
            }
          }
        }
      }
      this.initEchart()
    },
    // 重置图表
    resetEchart() {
      this.chartExtend.series[0].data = []
      this.chartExtend.legend.data = []
    },
  },
}
</script>
<style lang="scss" scoped>
::v-deep .el-card__header {
  padding: 7px 15px 7px 20px !important;
}

::v-deep .el-card__body {
  height: 19vh !important;
}
#main{
  height: 100%;
  width: 100%;
}
</style>
